<template>
  <div>
    <el-container class="manager-container">
      <!-- this is manager page -->
      <!-- 主体区域 -->
      <el-container>
        <el-main>
          <div class="bg-breadcrumb">
          <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/teacher/teacherhomepage' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>查询课程</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!-- 查找课程：搜索框 -->
        <el-card class="table-card-search">
          <el-row :gutter="20" type="flex" align="middle">
            <el-col :span="2" :offset="0">
              查询课程
            </el-col>
            <el-col :span="10" :offset="0">
              <el-input
              placeholder="请输入内容"
              v-model="searchValue"
              class="input-with-select"
              clearable>
                <el-select v-model="searchMethod" slot="prepend" placeholder="课程名称" class="select-search">
                  <el-option label="课程名称" value="1"></el-option>
                  <el-option label="教师姓名" value="2"></el-option>
                  <el-option label="班级名称" value="3"></el-option>
                  <el-option label="教室名称" value="4"></el-option>
                </el-select>
                <el-button slot="append" icon="el-icon-search" @click="searchCourse()"></el-button>
              </el-input>
            </el-col>
          </el-row>
        </el-card>
          <el-row>
            <el-card class="table-card">
              <el-table
              :data="courseList"
              class="lesson-table"
              style="width: 100%">
                <!-- 课程名 -->
                <el-table-column
                  label="课程名称"
                  align="center"
                  prop="course_name"
                  width="140">
                </el-table-column>
                <!-- 专业 -->
                <el-table-column
                  prop="class_name"
                  align="center"
                  label="上课专业">
                </el-table-column>
                <el-table-column
                  prop="teacher_name"
                  align="center"
                  label="上课老师">
                </el-table-column>
                <el-table-column
                  prop="genre"
                  align="center"
                  label="课程类型">
                </el-table-column>
                <el-table-column
                  prop="class_period"
                  align="center"
                  label="课时">
                </el-table-column>
                <el-table-column
                  prop="credict"
                  align="center"
                  label="课程学分">
                </el-table-column>
                <el-table-column
                  prop="classroom"
                  align="center"
                  label="上课教室">
                </el-table-column>
                <!-- 上课从第几周到第几周 -->
                <el-table-column
                  prop="class_cycle"
                  align="center"
                  label="上课周期">
                </el-table-column>
                <!-- 上课时间 -->
                <el-table-column
                  prop="time_list[0].courseTime"
                  align="center"
                  label="上课时间">
                  <template slot-scope="scope">
                    <el-dropdown trigger="click">
                      <span class="el-dropdown-link">
                        显示时间<i class="el-icon-arrow-down el-icon--right"></i>
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="(item, index) in scope.row.time_list" :key="index">{{ item.courseTime }}</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </template>
                </el-table-column>
              </el-table>

              <!-- 分页导航 -->
              <div class="page_div">
                <el-pagination
                  background
                  @current-change="handleCurrentChange"
                  :page-size="10"
                  layout="total, prev, pager, next"
                  :total="courseNum">
                </el-pagination>
              </div>
            </el-card>
          </el-row>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      courseList: [],
      courseNum: 0,
      currentPage: 1,
      // 搜索框部分
      searchValue: '',
      searchMethod: '1',
    }
  },
  created () {
    this.getCourseList()
  },
  methods: {
    async getCourseList () {
      const { data: res } = await this.$http.post(`courseManagement/all/getCourseManagementList?page=${this.currentPage - 1}&rows=10`)
      console.log(res)
      if (!res.state) return this.$message.error(res.msg)
      this.foreachObj(res.detail.list)
      this.courseNum = res.detail.total
    },

    // 处理后端数据
    foreachObj (data) {
      data.forEach(item => {
        var obj = {
          id: 0,
          course_name: '',
          class_cycle: '',
          class_name: '',
          course_teacher_num: '',
          class_period: '',
          classroom: '',
          credict: '',
          genre: '',
          teacher_name: '',
          time_list: [],
          week_start: 0,
          week_end: 0,
          time_type: 0
        }
        //需要将classCycle拆分一下
        let cycle = item.class_cycle.split(' ')
        obj.week_start = cycle[0]
        obj.week_end = cycle[1]
        obj.time_type = cycle[2]

        obj.class_cycle = cycle[0] + '-' + cycle[1] + '周'
        obj.id = item.id
        obj.course_name = item.course_name
        obj.classroom = item.classroom
        obj.class_name = item.class_name
        obj.course_teacher_num = item.courseTeacherNum
        obj.class_period = item.class_period
        obj.credict = item.credict
        obj.genre = item.genre
        obj.teacher_name = item.teacher_name
        this.$http.post(`courseManagement/all/selectCourseManagementListById?id=${item.id}`)
        .then(resp => {
          const { data: res } = resp
          // console.log(res)
          // 这里的解决方式暂时保留（有问题），
          // 后期需要存入多个时间点时就不能只取第一个时间了
          obj.time_list = res.detail.courseTime
        }).catch(err => {
          console.log(err)
        })
        this.courseList.push(obj)
      })
    },

    async handleCurrentChange (val) {
      this.currentPage = val;
      // this.getCourseList();
    },
    // 搜索所有匹配到的课程
    searchCourse () {
      // 通过课程名搜索
      this.getCourseList()
    },
    // 获取所有的课程
    // 相当于页面中的那个选择方式为全局的变量改变
    async getCourseList () {
      // 通过课程
      if (this.searchMethod == 1) {
        const { data: res } = await this.$http.post(`courseManagement/all/getCourseManagementList?page=${this.currentPage - 1}&rows=10&courseName=${this.searchValue}`)
        console.log(res)
        if (!res.state) return
        this.courseList = []
        this.foreachObj(res.detail.list)
        this.courseNum = res.detail.total
      }
      // 通过教师搜索
      else if (this.searchMethod == 2) {
        const { data: res } = await this.$http.post(`courseManagement/all/getCourseManagementList?page=${this.currentPage - 1}&rows=10&teacherName=${this.searchValue}`)
        console.log(res)
        if (!res.state) return
        this.courseList = []
        this.foreachObj(res.detail.list)
        this.courseNum = res.detail.total
      }
      // 通过班级搜索
      else if (this.searchMethod == 3) {
        const { data: res } = await this.$http.post(`courseManagement/all/getCourseManagementList?page=${this.currentPage - 1}&rows=10&className=${this.searchValue}`)
        console.log(res)
        if (!res.state) return
        this.courseList = []
        this.foreachObj(res.detail.list)
        this.courseNum = res.detail.total
      }
      // 通过教室搜索
      else if (this.searchMethod == 4) {
        const { data: res } = await this.$http.post(`courseManagement/all/getCourseManagementList?page=${this.currentPage - 1}&rows=10&classroom=${this.searchValue}`)
        console.log(res)
        if (!res.state) return
        this.courseList = []
        this.foreachObj(res.detail.list)
        this.courseNum = res.detail.total
      }
    }
  }
}
</script>

<style lang="less" scoped>
.manager-container {
  height: 100vh;
  background-color: #f0f1f7;

  .el-main {
    padding: 0px;

    .row-card {
      margin: 20px;

      .header-col {
        margin-top: 6px;
        margin-bottom: 20px;
      }
    }

    .table-card {
      margin-left: 20px;
      margin-right: 20px;
    }

    .table-card-search {
      margin-left: 20px;
      margin-right: 20px;
      margin-bottom: 10px;
    }

    .el-breadcrumb {
    height: 35px;
    line-height: 35px;
    margin-left: 2%;
    }

    .page_div {
        padding: 20px;
        text-align: right;
    }

    .select-search {
      width: 150px;
    }
  }
  // .el-aside {
  //   background-color: #C0C4CC;

  //   .el-menu {
  //     border-right: none;
  //   }
  // }
}
</style>
